<template>
  <div id="index" ref="appRef">
    <div class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <div class="d-flex jc-center">
          <dv-decoration-10 class="dv-dec-10"/>
          <div class="d-flex jc-center">
            <dv-decoration-8 class="dv-dec-8" :color="['#568aea', '#000000']"/>
            <div class="title">
              <span class="title-text" style="font-size: 45px;width: 600px">悦达家纺前织生产概况</span>
<!--              <dv-decoration-6-->
<!--                class="dv-dec-6"-->
<!--                :reverse="true"-->
<!--                :color="['#50e3c2', '#67a1e5']"-->
<!--              />-->
            </div>
            <dv-decoration-8
              class="dv-dec-8"
              :reverse="true"
              :color="['#568aea', '#000000']"
            />
          </div>
          <dv-decoration-10 class="dv-dec-10-s"/>
        </div>

        <!-- 第二行 -->
        <div class="d-flex jc-between px-2">
          <div class="d-flex aside-width">
            <div class="react-left ml-4 react-l-s">
              <span class="react-before"></span>
<!--              <span class="text fw-b" >{{curcompany}}</span>-->
            </div>
            <div class="react-right ml-3">
              <span class="text">{{curMachine.styleId}}</span>
            </div>
          </div>
          <div class="d-flex aside-width">
            <div class="react-right bg-color-black mr-3">
<!--              <el-select class="text fw-b" v-model="curmid" filterable placeholder="请选择">-->
<!--                <el-option-->
<!--                  v-for="(item, index) in macnamelist"-->
<!--                  @click.native ="changeMac(index)"-->
<!--                  :key="item[1]"-->
<!--                  :label="item[0]"-->
<!--                  :value="item[1]"/>-->
<!--              </el-select>-->
            </div>
            <div class="react-right mr-4 react-l-s">
              <span class="react-after"></span>
              <span class="text"
              >{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span
              >
            </div>
          </div>
        </div>

        <div class="body-box">
          <!-- 第三行数据 -->
          <div class="content-box">
<!--            <div>-->
<!--              <dv-border-box-12>-->
<!--                <centerLeft1 :clchart-data="clchartData"/>-->
<!--              </dv-border-box-12>-->
<!--            </div>-->
            <div>
              <dv-border-box-12>
                <centerLeft2 :cur-machine="curMachine"/>
              </dv-border-box-12>
            </div>
            <!-- 中间 -->
            <div>
              <dv-border-box-12>
                <center :cur-machine="curMachine"/>
              </dv-border-box-12>
            </div>
            <!-- 中间 -->
            <div>
              <dv-border-box-12>
                <centerRight :cur-machine="curMachine"/>
              </dv-border-box-12>
            </div>
<!--            <div>
              <dv-border-box-13>
                <centerRight1 :cur-machine="curMachine"/>
              </dv-border-box-13>
            </div>-->
          </div>

          <!-- 第四行数据 -->
          <div class="bototm-box">
            <div>
              <dv-border-box-12>
                <bototm1 :cur-machine="curMachine"/>
              </dv-border-box-12>
            </div>
            <!-- 中间 -->
            <div>
              <dv-border-box-12>
                <bototm2 :cur-machine="curMachine"/>
              </dv-border-box-12>
            </div>
            <!-- 中间 -->
            <div>
              <dv-border-box-12>
                <bototm3 :cur-machine="curMachine"/>
              </dv-border-box-12>
            </div>
            <!--<dv-border-box-13>
              <bottomLeft/>
            </dv-border-box-13>
            <dv-border-box-12>
              <bottomRight/>
            </dv-border-box-12>-->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import drawMixin from "../../utils/drawMixin";
    import {formatTime} from '../../utils/index.js'
    import centerLeft1 from './centerLeft1'
    import centerLeft2 from './centerLeft2'
    import centerRight1 from './centerRight1'
    import centerRight2 from './centerRight2'
    import center from './center'
    import bototm1 from './bototm1'
    import bototm2 from './bototm2'
    import bototm3 from './bototm3'
    import centerRight from './centerRight'
    import bottomLeft from './bottomLeft'
    import bottomRight from './bottomRight'
    import { listRealtime, getRealtime, delRealtime, addRealtime, updateRealtime, exportRealtime } from "@/api/mes/realtime";
    import {listCurMachine} from "@/api/mesana/warp";
    export default {
        mixins: [drawMixin],
        data() {
            return {
                timing: null,
                timer:null,
                loading: true,
                dateDay: null,
                dateYear: null,
                dateWeek: null,
                weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
                //浆纱机列表
                macnamelist: [],
                //当前机台id
                curmid: null,
                //当前公司
                curcompany: null,
                //当前机台
                curMachine: Object,
                //上左边echart数据
                clchartData: {}
            }
        },
        components: {
            centerLeft1,
            centerLeft2,
            centerRight1,
            centerRight2,
            center,
            bototm1,
            bototm2,
            bototm3,
            centerRight,
            bottomLeft,
            bottomRight
        },
        mounted() {
            this.timeFn()
            this.cancelLoading()
          this.queryCurmachine()
          /*this.queryMacList()*/
          this.timer = setInterval(() => {
            setTimeout(this.queryCurmachine(), 0)
          }, 1000*60)
        },

        created(){


        },

        beforeDestroy() {
            clearInterval(this.timing);
            clearInterval(this.timer);
            this.timer = null;
        },
        methods: {
            queryCurmachine(){
              listCurMachine().then(response =>{
                this.curMachine = response.data.curMachine;

              })
            },

            changeMac(index){
                this.curcompany = this.macnamelist[index][2];
                this.queryMacInfo(this.curmid);
            },

            timeFn() {
                this.timing = setInterval(() => {
                    this.dateDay = formatTime(new Date(), 'HH: mm: ss');
                    this.dateYear = formatTime(new Date(), 'yyyy-MM-dd');
                    this.dateWeek = this.weekday[new Date().getDay()];
                }, 1000)
            },
            cancelLoading() {
                setTimeout(() => {
                    this.loading = false
                }, 500)
            },
            queryMacList(){
                listRealtime(null).then(response => {
                    let mlist = [];
                    response.rows.forEach(function (Item, Index) {
                        mlist.push([Item.name, Item.mid, Item.company])

                    });
                    this.macnamelist = mlist;
                    this.curmid = mlist[0][1];
                    this.curcompany = mlist[0][2];
                    this.queryMacInfo(this.curmid)
                })
            },
            queryMacInfo(macID){
                getRealtime(macID).then(response=>{
                    this.curMachine = response.data;
                });
                listRealtime(null).then(response=>{
                    let xDatas = [];
                    let seriesDatas =[];
                    response.rows.forEach(function (Item, Index) {
                        xDatas.push(Item.name);
                        seriesDatas.push({value: Item.beamLength, name: Item.name})
                    });
                    this.clchartData = {
                        xData: xDatas,
                        seriesData: seriesDatas,
                    }
                })
            },



        }
    }
</script>

<style lang="scss">
  // 颜色
  $colors: (
    "primary": #1A5CD7,
    "info-1": #4394e4,
    "info": #4b67af,
    "white": #ffffff,
    "light": #f9f9f9,
    "grey-1": #999999,
    "grey": #666666,
    "dark-1": #5f5f5f,
    "dark": #222222,
    "black-1": #171823,
    "black": #000000,
    "icon": #5cd9e8
  );

  // 字体大小
  $base-font-size: 0.2rem;
  $font-sizes: (
    xxs: 0.1,
    //8px
    xs: 0.125,
    //10px
    sm: 0.2875,
    //12px
    md: 0.1625,
    //13px
    lg: 0.175,
    //14px
    xl: 0.2,
    //16px
    xxl: 0.225,
    //18px
    xxxl: 0.25 //20px,,,,
  );

  // 宽高
  .w-100 {
    width: 100%;
  }

  .h-100 {
    height: 100%;
  }

  //flex
  .d-flex {
    display: flex;
  }

  .flex-column {
    flex-direction: column;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .flex-nowrap {
    flex-wrap: nowrap;
  }

  $flex-jc: (
    start: flex-start,
    end: flex-end,
    center: center,
    between: space-between,
    around: space-around,
    evenly: space-evenly,
  );

  $flex-ai: (
    start: flex-start,
    end: flex-end,
    center: center,
    stretch: stretch,
  );

  .flex-1 {
    flex: 1;
  }

  //.mt-1 => margin top
  //spacing
  $spacing-types: (
    m: margin,
    p: padding,
  );
  $spacing-directions: (
    t: top,
    r: right,
    b: bottom,
    l: left,
  );
  $spacing-base-size: 0.5rem;
  $spacing-sizes: (
    0: 0,
    1: 0.5,
    2: 1,
    3: 1.5,
    4: 2,
    5: 2.5,
  );


  #index {
    color: #d3d6dd;
    width: 1920px;
    height: 1080px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: left top;
    overflow: hidden;

    .bg {
      width: 100%;
      height: 100%;
      padding: 16px 16px 0 16px;
      background-image: url("../../assets/pageBg.png");
      background-size: cover;
      background-position: center center;
    }

    .host-body {
      .dv-dec-10,
      .dv-dec-10-s {
        width: 33.3%;
        height: 5px;
      }

      .dv-dec-10-s {
        transform: rotateY(180deg);
      }

      .dv-dec-8 {
        width: 200px;
        height: 50px;
      }

      .title {
        position: relative;
        width: 500px;
        text-align: center;
        background-size: cover;
        background-repeat: no-repeat;

        .title-text {
          font-size: 24px;
          position: absolute;
          bottom: 0;
          left: 47%;
          transform: translate(-50%);
        }

        .dv-dec-6 {
          position: absolute;
          bottom: -30px;
          left: 50%;
          width: 250px;
          height: 8px;
          transform: translate(-50%);
        }
      }

      // 第二行
      .aside-width {
        width: 40%;
      }

      .react-r-s,
      .react-l-s {
        background-color: #0f1325;
      }

      // 平行四边形
      .react-right {
        &.react-l-s {
          text-align: right;
          width: 500px;
        }

        font-size: 18px;
        width: 300px;
        line-height: 50px;
        text-align: center;
        transform: skewX(-45deg);

        .react-after {
          position: absolute;
          right: -25px;
          top: 0;
          height: 50px;
          width: 50px;
          background-color: #0f1325;
          transform: skewX(45deg);
        }

        .text {
          display: inline-block;
          transform: skewX(45deg);
        }
      }

      .react-left {
        &.react-l-s {
          width: 500px;
          text-align: left;
        }

        font-size: 18px;
        width: 300px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        transform: skewX(45deg);
        background-color: #0f1325;

        .react-before {
          position: absolute;
          left: -25px;
          top: 0;
          height: 50px;
          width: 50px;
          background-color: #0f1325;
          transform: skewX(-45deg);
        }

        .text {
          display: inline-block;
          transform: skewX(-45deg);
        }
      }

      .body-box {
        margin-top: 16px;
        display: flex;
        flex-direction: column;

        //下方区域的布局
        .content-box {
          display: grid;
          grid-template-columns: 3fr 3.5fr 2.5fr;

        }

        // 底部数据
        .bototm-box {
          margin-top: 10px;
          display: grid;
          grid-template-columns: 3fr 3.5fr 2.5fr; //repeat(2, 50%)
        }
      }
    }
  }


  //  全局样式
  * {
    margin: 0;
    padding: 0;
    list-style-type: none;
    outline: none;
    box-sizing: border-box;
  }

  html {
    margin: 0;
    padding: 0;
  }

  body {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.2em;
    background-color: #f1f1f1;
    margin: 0;
    padding: 0;
  }

  a {
    color: #343440;
    text-decoration: none;
  }

  .clearfix {
    &::after {
      content: "";
      display: table;
      height: 0;
      line-height: 0;
      visibility: hidden;
      clear: both;
    }
  }

  //浮动
  .float-r {
    float: right;
  }

  //浮动
  .float-l {
    float: left;
  }

  // 字体加粗
  .fw-b {
    font-weight: bold;
  }

  //文章一行显示，多余省略号显示
  .title-item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .bg-color-black {
    background-color: rgba(19, 25, 47, 0.6);
  }

  .bg-color-blue {
    background-color: #1a5cd7;
  }

  .colorBlack {
    color: #272727 !important;

    &:hover {
      color: #272727 !important;
    }
  }

  .colorGrass {
    color: #33cea0;

    &:hover {
      color: #33cea0 !important;
    }
  }

  .colorRed {
    color: #ff5722;

    &:hover {
      color: #ff5722 !important;
    }
  }

  .colorText {
    color: #d3d6dd !important;

    &:hover {
      color: #d3d6dd !important;
    }
  }

  .colorBlue {
    color: #257dff !important;

    &:hover {
      color: #257dff !important;
    }
  }

  //颜色
  @each $colorkey, $color in $colors {
    .text-#{$colorkey} {
      color: $color;
    }

    .bg-#{$colorkey} {
      background-color: $color;
    }
  }

  //对齐
  @each $var in (left, center, right) {
    .text-#{$var} {
      text-align: $var !important;
    }
  }

  //flex
  @each $key, $value in $flex-jc {
    .jc-#{$key} {
      justify-content: $value;
    }
  }

  @each $key, $value in $flex-ai {
    .ai-#{$key} {
      align-items: $value;
    }
  }

  //字体
  @each $fontkey, $fontvalue in $font-sizes {
    .fs-#{$fontkey} {
      font-size: $fontvalue * $base-font-size;
    }
  }

  //.mt-1 => margin top
  //spacing

  @each $typekey, $type in $spacing-types {
    //.m-1
    @each $sizekey, $size in $spacing-sizes {
      .#{$typekey}-#{$sizekey} {
        #{$type}: $size * $spacing-base-size;
      }
    }

    //.mx-1
    @each $sizekey, $size in $spacing-sizes {
      .#{$typekey}x-#{$sizekey} {
        #{$type}-left: $size * $spacing-base-size;
        #{$type}-right: $size * $spacing-base-size;
      }

      .#{$typekey}y-#{$sizekey} {
        #{$type}-top: $size * $spacing-base-size;
        #{$type}-bottom: $size * $spacing-base-size;
      }
    }

    //.mt-1
    @each $directionkey, $direction in $spacing-directions {
      @each $sizekey, $size in $spacing-sizes {
        .#{$typekey}#{$directionkey}-#{$sizekey} {
          #{$type}-#{$direction}: $size * $spacing-base-size;
        }
      }
    }

    .#{$typekey} {
      #{$type}: 0;
    }
  }


</style>
